<%@ page language ="java" import ="java.util.*" pageEncoding="UTF-8" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://" +request.getServerName()+":"+request.getServerPort()+path+ "/";
%>

<!DOCTYPE>
<html>
  <head>
    <title>接口文档</title>
     <meta http-equiv ="pragma" content ="no-cache" >
     <meta http-equiv ="cache-control" content ="no-cache" >
     <meta http-equiv ="expires" content ="0" >
     <meta http-equiv ="keywords" content="keyword1,keyword2,keyword3" >
     <meta http-equiv ="description" content ="This is my page">
      <!--
     <link rel="stylesheet" type="text/css" href="styles.css">
     -->
<style type ="text/css">
table {background: #000;margin-bottom: 20px;}
table td,th {background: #fff;text-align: center;padding-top: 5px;padding-bottom: 5px;}
input {border: 0px solid gray;width: 90%;height: 30px;text-align: center;}
textarea {border: 0px solid gray;width: 98%;overflow-y: hidden;}
select {border: 0px solid gray;width: 100%;height: 30px;text-align: center;}
.title {width: 150px;background: #ddd;}
.descColor {background: #fff;}
.numberColor {background: #fff;}
.methodColor {background: #fff;}
.urlColor {background: #fff;}
.wayColor {background: #fff;}
.paramsTitleColor {background: #87d3fa;}
.paramsColor1 {background: #fff;}
.paramsColor2 {background: #fff;}
.paramsColor3 {background: #fff;}
.paramsColor4 {background: #fff;}
.paramsColor5 {background: #fff;}
.returnTitleColor {background: #87d3fa;}
.demoColor {background: #fff;}
.remarkColor {background: #fff;}
.mainLeft{background:#2B2F3E;width:350px;position: fixed;z-index: 100;top: 0px;left: 0px;height:100%;overflow-y:scroll;}
.mainLeft ul{margin:0px;padding:0px;padding-top:35px;}
.mainLeft ul li{list-style: none;font-size:20px;margin-top:5px;color:#7A7E8A;}
.mainLeft ul li:hover{color:#fff;background:#ff404b;}
.mainLeft ul li span{margin-left:20px;margin-right:10px;float:left;display: block;padding-top:5px;}
.mainLeft ul li a{color:#7A7E8A;text-decoration: none;display: block;padding-top:5px;padding-bottom:5px;}
.mainLeft ul li a:hover{color:#fff;background:#ff404b;}
.mainLeft .search{position: fixed;z-index: 200;top:5px;left:15px;width: 300px;border-radius:10px;text-align: left;padding-left:20px;background:#EFEFEF;}
.mainRight{height: 100%;left: 400px;position: absolute;}
.returnTop{opacity:0;position: fixed;bottom:5px;right:20px;width:80px;border-radius:10px;text-align: center;z-index: 3000;display:block;text-decoration: none;padding-top:20px;padding-bottom:20px;}
.returnTop:hover{opacity:1;background:#bbb;color:#fff;display:block;}
</style>
  </head>

  <body id="mainBody">

  <a class="returnTop" href="#mainBody">返回<br/>顶部</a>

  <div class="mainLeft">
  	<input class="search" placeholder="请输入关键字" autocomplete="off" />
  	<ul>
  	</ul>
  </div>

  <div class="mainRight">
  <div id="template_table" style="display:none;">
	<table width ="900" border ="0" cellpadding ="0" cellspacing="1" >
          <tr>
              <th class ="title" >接口编号</th>
              <td class ="numberColor" colspan="5" ><input name="code" /></td>
          </tr>
          <tr>
              <th class ="title" >接口描述</th>
              <td class ="descColor" colspan ="5" ><input name="descs" /></td>
          </tr>
          <tr>
              <th class ="title" >请求方法</th>
              <td class ="methodColor" colspan="5" ><input name="name" /></td>
          </tr>
          <tr>
              <th class ="title" >请求地址</th>
              <td class ="urlColor" colspan="5" ><input name="address" /></td>
          </tr>
          <tr>
              <th class ="title" >请求方式</th>
              <td class ="wayColor" colspan="5" ><input name="way" /></td>
          </tr>
          <tr>
              <th class ="title onclick_add" rowspan="2">请求参数</th>
              <td class ="paramsTitleColor" >参数名</td>
              <td class ="paramsTitleColor" >类型</td>
              <td class ="paramsTitleColor" >是否为空</td>
              <td class ="paramsTitleColor" >默认值</td>
              <td class ="paramsTitleColor" >描述</td>
          </tr>
          <tr class="tr_params">
              <td class ="paramsColor1" >
              	<input type="hidden" name="genre" value="0"/>
              	<input type="hidden" name="id" value="0"/>
              	<input name="name"/>
              </td>
              <td class ="paramsColor1" >
              	<select name="type">
              		<option value="String">String</option>
              		<option value="Int">Int</option>
              		<option value="Byte">Byte</option>
              		<option value="Boolean">Boolean</option>
              		<option value="Float">Float</option>
              		<option value="Double">Double</option>
              	</select>
              </td>
              <td class ="paramsColor1" >
              	<select name="isnull">
              		<option value="0">NO</option>
              		<option value="1">YES</option>
              	</select>
              </td>
              <td class ="paramsColor1" ><input name="none" /></td>
              <td class ="paramsColor1" ><input name="descs" /></td>
          </tr>
          <tr>
              <th class ="title onclick_add" rowspan="2">返回值</th>
              <td class ="returnTitleColor" >参数名</td>
              <td class ="returnTitleColor" >类型</td>
              <td class ="returnTitleColor" >是否为空</td>
              <td class ="returnTitleColor" >默认值</td>
              <td class ="returnTitleColor" >描述</td>
          </tr>
          <tr class="tr_return">
              <td class ="paramsColor1" >
              	<input type="hidden" name="genre" value="1"/>
              	<input type="hidden" name="id" value="0"/>
              	<input name="name"/>
              </td>
              <td class ="paramsColor1" >
              	<select name="type">
              		<option value="String">String</option>
              		<option value="Int">Int</option>
              		<option value="Byte">Byte</option>
              		<option value="Boolean">Boolean</option>
              		<option value="Float">Float</option>
              		<option value="Double">Double</option>
              	</select>
              </td>
              <td class ="paramsColor1" >
              	<select name="isnull">
              		<option value="0">NO</option>
              		<option value="1">YES</option>
              	</select>
              </td>
              <td class ="paramsColor1" ><input name="none" /></td>
              <td class ="paramsColor1" ><input name="descs" /></td>
          </tr>
          <tr>
              <th class ="title" >返回值示例</th>
              <td class ="demoColor" colspan="5" >
                   <textarea rows="5" name="demo" ></textarea>
              </td>
          </tr>
          <tr>
              <th class ="title" >备注</th>
              <td class ="remarkColor" colspan ="5" >
              	<textarea name="remark"></textarea>
              </td>
          </tr>
          <tr style="display:none;">
              <th class ="title" colspan="6">
				  <input type="hidden" name="id" value="0"/>
				  <button type="button" onclick="saveMethod(this)">保存</button>
				  <button type="button" onclick="refreshMethod(this,false)">刷新</button>
              </th>
          </tr>
     </table>
     </div>

    <div id ="tempBody" style ="height: 100%;width:900px;">
 		<h1 align="center" class="docTitle">接口文档</h1>
    </div>
 </div>
 <!--
    <div id ="tempDiv" >
    <div id ="tempColor" style="float :left ;margin-right :20px ;margin-top :20px ;width :400px ;height : 100px ;background-color :[temp_bg_color];">
         <div style ="color:[temp_font_color]">
              </br>
              &nbsp;&nbsp;&nbsp;&nbsp;
              public void main(){</br>
                   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                   System.out.println("Test Word Color!");</br>
              &nbsp;&nbsp;&nbsp;&nbsp;
              }</br>
         </div>
    </div>
    </div>
 -->
  </body>
  <!-- <script src="http://code.jquery.com/jquery-latest.js"></script> -->
  <script type="text/javascript" src="resource/metronic/global/scripts/jquery-1.11.3.js"></script>
  <script type ="text/javascript">

  giveMethod();

  //加载所有文档接口方法
  function giveMethod(){
	  $.ajax({
		 url:'doc/interface/giveMethodList',
		 type:'GET',
		 dataType:'JSON',
		 data:'docInterface_id=1',
		 success:function(methodList){
			// var template = $('#template_html').html();
			// alert(template);
			$.each(methodList,function(i,item){

				//加载索引
				$('.mainLeft ul').append('<li title="' + item.descs + '"><span>' + (i + 1) + '</span><a href="#' + item.id + '">' + item.name + '</a></li>');

				//加载所有文档
				$('#tempBody').append(loadTable(item));

			});
			 //alert(JSON.stringify(methodList));
		 },
		 error:function(data){
			alert(JSON.stringify(data));
		 }
	  });
  }

  //显示隐藏新增文档界面
  $(document).on('dblclick','.docTitle',function(){
	  var table = $('#template_table');
	  if(table.is(":hidden")){
		  table.slideDown(2000);
	  }else{
		  table.slideUp(2000);
	  }
  });

  //保存文档数据
  function saveMethod(dom){

	  //文档方法
	  var docMethod = {};
	  $(dom).parents('table').find('tr:not(.tr_params,.tr_return) input,textarea').each(function(i,item){
		 if($(this).attr('name') != undefined){
			 docMethod[$(this).attr('name')] = $(this).val();
		 }
	  });

	  //alert(JSON.stringify(docMethod));

	  //文档方法参数
	  var docParamsList = [];
	  $(dom).parents('table').find('.tr_params,.tr_return').each(function(i,item){
		 var docParams = {};
		 $(this).find('input').each(function(j,temp){
			 docParams[$(temp).attr('name')] = $(temp).val();
		 });
		 $(this).find('select').each(function(n,one){
			 docParams[$(one).attr('name')] = $(one).val();
		 });
		 docParamsList[i] = docParams;
	  });

	  //alert(JSON.stringify(docParamsList));

	  docMethod['paramsList'] = docParamsList;

	  var docInterface = {};
	  docInterface['id'] = 1;

	  docMethod['docInterface'] = docInterface;

	  //alert(JSON.stringify(docMethod));

	  $.ajax({
		 url:'doc/interface/saveMethod',
		 contentType:'application/json',
		 type:'POST',
		 dataType:'JSON',
		 data:JSON.stringify(docMethod),
		 success:function(data){
			//alert(JSON.stringify(data));
			refreshMethod(dom,true);
			$(".search").trigger(jQuery.Event('keyup'));
		 },
		 error:function(data){
			alert(JSON.stringify(data));
		 }
	  });
  }

  //新增参数行
  $(document).on('click','.onclick_add',function(){

	  var nextDom = $(this).parent().next().clone();
	  var clazz = nextDom.attr('class');
	  if(clazz != undefined){
		  var lastDom = $(this).parent().siblings('.' + clazz).last();
		  nextDom.find('input[name="name"]').val('');
		  nextDom.find('input[name="none"]').val('');
		  nextDom.find('input[name="descs"]').val('');
		  nextDom.find('input[name="genre"]').val(clazz == 'tr_params' ? 0 : 1);
		  lastDom.after(nextDom);
	  }else{
		  var nullDom = $(".tr_params:last").clone();
		  nullDom.attr('class','tr_return');
		  nullDom.find('input[name="name"]').val('');
		  nullDom.find('input[name="none"]').val('');
		  nullDom.find('input[name="descs"]').val('');
		  nullDom.find('input[name="genre"]').val(1);
		  $(this).parent().after(nullDom);
	  }

	  var rowspan = $(this).attr('rowspan');
	  $(this).attr('rowspan',rowspan * 1 + 1);
  });

  //显示/隐藏保存按钮
  $(document).on('dblclick','.title',function(){
	  var trLast = $(this).parents('table').find('tr:last');
	  if(trLast.is(":hidden")){
		  trLast.fadeIn("slow");
	  }else{
		  trLast.fadeOut("slow");
	  }
  });

  //刷新方法数据
  function refreshMethod(dom,bool){

	  var id = $(dom).parents('table').find('tr:not(.tr_params,.tr_return) input[name="id"]').val();

	  if(bool || id == 0){
		  $(dom).parents('table').find('input,textarea').each(function(i,item){
			 $(this).val('');
		  });

		  $(dom).parents('table').find('.tr_params:gt(0),.tr_return:gt(0)').remove();
		  $(dom).parents('table').find('.onclick_add').attr('rowspan',2);
		  return false;
	  }

	  $.ajax({
		 url:'doc/interface/giveOnlyMethod',
		 type:'GET',
		 dataType:'JSON',
		 data:'docMethod_id=' + id,
		 success:function(doMethod){
			 //alert(JSON.stringify(doMethod));
			 //alert($(dom).parents('table').prev().html());
			 $(dom).parents('table').prev().after(loadTable(doMethod));
			 $(dom).parents('table').remove();
		 },
		 error:function(data){
			alert(JSON.stringify(data));
		 }
	  });
  }

  //检索接口方法
  $('.search').keyup(function(){
	  $.ajax({
		 url:'doc/interface/giveSearchMethod',
		 type:'POST',
		 dataType:'JSON',
		 data:'docInterface_id=1&searchStr=' + $(this).val(),
		 success:function(doMethodList){
			 $('.mainLeft ul').children().remove();
			 $.each(doMethodList,function(i,item){
				 $('.mainLeft ul').append('<li title="' + item.descs + '"><span>' + (i + 1) + '</span><a href="#' + item.id + '">' + item.name + '</a></li>');
			 });
		 },
		 error:function(data){
			alert(JSON.stringify(data));
		 }
	  });
  });

  //加载单个接口方法的数据
  function loadTable(item){
	var tableDom = $('#template_table').children('table').clone();

	tableDom.attr('id',item.id);

	var allTr = tableDom.find('tr:not(.tr_params,.tr_return)');
	allTr.find("input[name='id']").val(item.id);
	allTr.find("input[name='code']").val(item.code);
	allTr.find("input[name='descs']").val(item.descs);
	allTr.find("input[name='name']").val(item.name);
	allTr.find("input[name='address']").val(item.address);
	allTr.find("input[name='way']").val(item.way);
	allTr.find("textarea[name='demo']").val(item.demo);
	allTr.find("textarea[name='remark']").val(item.remark);

	$.each(item.paramsList,function(n,params){
		var paramsDom = tableDom.find('.tr_params:first').clone();

		paramsDom.find("input[name='genre']").val(params.genre);
		paramsDom.find("input[name='id']").val(params.id);
		paramsDom.find("input[name='name']").val(params.name);
		paramsDom.find("input[name='none']").val(params.none);
		paramsDom.find("input[name='descs']").val(params.descs);
		paramsDom.find("select[name='type'] option[value='" + params.type + "']").attr('selected','selected');
		paramsDom.find("select[name='isnull'] option[value='" + params.isnull + "']").attr('selected','selected');

		if(params.genre == 0){
			paramsDom.attr('class','tr_params');
			tableDom.find('.tr_params:last').after(paramsDom);

			var paramsFirst = tableDom.find('.onclick_add:first');
			paramsFirst.attr('rowspan',paramsFirst.attr('rowspan') * 1 + 1);
		}else{
			paramsDom.attr('class','tr_return');
			tableDom.find('.tr_return:last').after(paramsDom);

			var paramsLast = tableDom.find('.onclick_add:last');
			paramsLast.attr('rowspan',paramsLast.attr('rowspan') * 1 + 1);
		}
	});

	tableDom.find('.tr_params:first,.tr_return:first').remove();
	tableDom.find('.onclick_add').each(function(k,oadd){
		$(oadd).attr('rowspan',$(oadd).attr('rowspan') * 1 -1);
	});

	return tableDom;
	//$('#tempBody').append(tableDom);
  }

  /*
  var colors = ['1', '2','3' ,'4', '5','6' ,'7', '8','9' ,'0', 'A','B' ,'C', 'D','E' ,'F'] ;
  var hei = 713;
  window.setInterval(function(){
       var bg_color = '#';
       var ft_color = '#';
         for(i =0; i<6 ;i++ ){
              bg_color += colors[Math.ceil(Math.random()*15)];
              ft_color += colors[Math.ceil(Math.random()*15)];
         }

       //$('#tempColor').css({
       ///     background: color
       ///});

         var tempContent = $('#tempDiv').html();
         tempContent = tempContent.replace('[temp_bg_color]', bg_color);
         tempContent = tempContent.replace('[temp_font_color]', ft_color);

         $('#tempBody').append(tempContent);

         hei += 20;

         //$(window).scrollTop(hei);
  } , 1500);
  */
  </script>
</html>

